import { useState, useImperativeHandle, forwardRef } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Modal, Radio } from 'antd';
import { operateLogModal, updateIcon } from '@/assets';
import moment from 'moment';

import { TablePendingOrder, TableLimitStatus } from './components';

function SubmitStatusModal({ statusUpdateTime, dispatch }, ref) {
  useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = useState(false),
    [fetchStatus, setFetchStatus] = useState(1);

  const initHandle = () => {
    setShowModal(true);
    dispatch({ type: 'rollingBatch/fetchUnitStatusInfo' });
  };

  const updateStatus = async () => dispatch({ type: 'rollingBatch/asyncUpdateStatus' });

  const fetchStatusChange = ({ target: { value } }) => {
    setFetchStatus(value);
  };

  const modalTitleRender = () => (
    <div className={styles.modalTitle}>
      <div>
        <img src={operateLogModal} />
        <span className={styles.text}>状态查询</span>
      </div>
      <div className={styles.statusTab}>
        <div>
          <Radio.Group
            className={styles.radioGroup}
            value={fetchStatus}
            onChange={fetchStatusChange}
          >
            <Radio.Button className={styles.radio} value={1}>
              挂单状态
            </Radio.Button>
            <Radio.Button className={styles.radio} value={2}>
              限额状态
            </Radio.Button>
          </Radio.Group>
          <span className={styles.label}>单位(量：</span>MWh{' '}
          <span className={styles.label}>价：</span>元/MWh
          <span className={styles.label} style={{ marginLeft: 0 }}>
            )
          </span>
        </div>
        <div>
          <img className={styles.icon} src={updateIcon} onClick={updateStatus} />
          <span className={styles.label}>更新时间：</span>
          <span>
            {statusUpdateTime ? moment(statusUpdateTime).format('YYYY.MM.DD HH:mm') : '-'}
          </span>

          <span className={styles.tradeForwordTitle}>窗口买卖方向限制</span>
          <span className={styles.sellIcon} />
          <span>卖出</span>
          <span className={styles.buyIcon} />
          <span>买入</span>
        </div>
      </div>
    </div>
  );

  return (
    <Modal
      className={styles.submitStatusModal}
      centered={true}
      title={modalTitleRender()}
      visible={showModal}
      footer={null}
      onCancel={() => setShowModal(false)}
    >
      {fetchStatus === 1 ? <TablePendingOrder /> : <TableLimitStatus />}
    </Modal>
  );
}

export default connect(
  ({ rollingBatch: { statusUpdateTime } }) => ({ statusUpdateTime }),
  null,
  null,
  { forwardRef: true },
)(forwardRef(SubmitStatusModal));
